<template>
  <div>
    <el-input v-model="balanceno" readonly >
      <i slot="suffix" class="el-input__icon el-icon-circle-plus" @click="openDia" />
      <i slot="suffix" class="el-input__icon el-icon-error" @click="changeDE" />
    </el-input>
    <el-dialog
      ref="dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"

      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="电子发票收款单选择"
      width="80%"
      @opened="searchHandle"
    >
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form
          ref="searchForm"
          :inline="true"
          :model="search"
          size="mini"
          label-width="100px"
          label-position="right">
          <el-form-item prop="ORDER_NO" label="业务单号">
            <el-input v-model="search.ORDER_NO" class="search-input" />
          </el-form-item>
          <el-form-item prop="PAYMENT_OBJECT_NAME" label="收费对象名称">
            <el-input v-model="search.PAYMENT_OBJECT_NAME" class="search-input" />
          </el-form-item>
          <el-form-item prop="LICENSE" label="车牌号">
            <el-input v-model="search.LICENSE" class="search-input" />
          </el-form-item>
          <el-form-item prop="VIN" label="车牌号">
            <el-input v-model="search.VIN" class="search-input" />
          </el-form-item>

          <div style="text-align:center">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">发票订单信息</div>
        </div>
        <!-- 用户列表 -->
        <BaseTable ref="table" highlight-current-row @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle" @current-change="select" >
          <el-table-column label="序号" type="index" min-width="50"/>
          <el-table-column align="center" label="操作" min-width="50">
            <template slot-scope="scope">
              <el-tooltip class="item" content="收款单信息" placement="bottom">
                <el-button type="text" style="font-size: 20px;" icon="el-icon-sort" @click="checkDialog(scope.row)"/>
              </el-tooltip>

            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="ORDER_NO" label="订单单号" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="PAYMENT_OBJECT_CODE" label="收费对象代码" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="PAYMENT_OBJECT_NAME" label="收费对象名称" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="LICENSE" label="车牌号" min-width="100"/>
          <el-table-column prop="DIS_AMOUNT" label="应收账款" min-width="100"/>
          <el-table-column prop="RECEIVE_AMOUNT" label="已收账款" min-width="100"/>
          <el-table-column prop="SUB_OBB_AMOUNT" label="去零账款" min-width="100"/>
          <el-table-column prop="DERATE_AMOUNT" label="已免账款" min-width="100"/>
          <el-table-column prop="ARREARAGE_AMOUNT" label="未收账款" min-width="100"/>
          <el-table-column prop="DIS_LABOUR_AMOUNT" label="折扣后工时费" min-width="100"/>
          <el-table-column prop="DIS_REPAIR_PART_AMOUNT" label="折扣后维修材料费" min-width="100"/>
          <el-table-column prop="DIS_SALES_PART_AMOUNT" label="折扣后销售材料费" min-width="100"/>
          <el-table-column prop="DIS_ADD_ITEM_AMOUNT" label="折扣后附加项目费" min-width="100"/>
        </BaseTable>
      </div>
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">收款单信息</div>
        </div>
        <el-table ref="voucherInfoTable" :data="voucherInfoList" border highlight-current-row @current-change="selectVoucher">
          <el-table-column align="center" label="序号" min-width="50" type="index"/>
          <el-table-column :show-overflow-tooltip="true" prop="PUB_PAY_NO" label="收款单号" min-width="150"/>
          <el-table-column :formatter="formatDate" prop="RECEIVE_DATE" label="收款日期" min-width="100" />
          <el-table-column :show-overflow-tooltip="true" prop="RECEIVE_AMOUNT" label="收款金额" min-width="100"/>
          <el-table-column :show-overflow-tooltip="true" prop="CUSTOMER_TYPE" label="收费对象类型" min-width="100">
            <template slot-scope="scope">
              <filtercode v-model="scope.row.CUSTOMER_TYPE" type="1038"/>
            </template>
          </el-table-column>
        </el-table>
        <div class="center">
          <Pagination
            :data="voucherInfopage"
            @change-size="changeSizeHandleVoucherInfo"
            @change-page="changePageHandleVoucherInfo"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <!-- <span slot="footer" class="dialog-footer"> -->
        <el-button type="primary" @click="confirmHandle" >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
        <!-- </span> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBalanceInfo, searchBalancePayDetail } from '@/api/capitalsettle/electronicinvoice/icinvoice'
import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import Pagination from '@/components/Pagination'
export default {
  name: 'Searchpay',
  components: {
    BaseTable,
    filtercode,
    Pagination
  },
  mixins: [formMixins],
  props: {
    balanceno: String
  },
  data() {
    return {
      dialogFormVisible: false,
      multipleSelection: [],
      voucherInfoList: [],
      voucherInfopage: {

      },
      multipleVoucherSelection: [],
      search: {
        limit: 10,
        pageNum: 1,
        ORDER_NO: '',
        PAYMENT_OBJECT_NAME: '',
        LICENSE: '',
        VIN: ''
      },
      addSearch: {
        limit: 10,
        pageNum: 1
      }
    }
  },

  computed: {},
  mounted() {

  },
  methods: {
    searchHandle() {
      const table = this.$refs['table']
      getBalanceInfo(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    openDia() {
      this.dialogFormVisible = true
      // let table = this.$refs["voucherInfoTable"];
      // table.complete().filData([]);
      this.voucherInfoList = []
      this.voucherInfopage = {}
      this.searchHandle()
    },
    cancel() {
      this.dialogFormVisible = false
    },
    changeDE() {
      this.$emit('getpay', {})
    },
    // 发票订单选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
      this.voucherInfoList = []
      this.voucherInfopage = {}
      this.addSearch = {
        limit: 10,
        pageNum: 1
      }
    },
    confirmHandle() {
      debugger
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择数据!'
        })
      } else {
        if (this.multipleVoucherSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择收款单!'
          })
        } else {
          this.multipleSelection.DIS_AMOUNT = this.multipleVoucherSelection.RECEIVE_AMOUNT
          this.$emit('getpay', this.multipleSelection)
          this.dialogFormVisible = false
        }
      }
    },
    checkDialog(data) {
      const id = data.ORDER_NO_ID
      searchBalancePayDetail(id, this.addSearch).then(res => {
        this.voucherInfoList = res.rows
        this.voucherInfopage = res
        // table.complete().filData(res);
      })
        .catch(err => {
          // table.complete();
        })
    },
    changeSizeHandleVoucherInfo(size) {
      this.addSearch.limit = size
      if (this.multipleSelection.length !== 0) {
        this.checkDialog(this.multipleSelection)
      }
    },
    changePageHandleVoucherInfo(num) {
      this.addSearch.pageNum = num
      if (this.multipleSelection.length !== 0) {
        this.checkDialog(this.multipleSelection)
      }
    },
    selectVoucher(val) {
      if (val == null) {
        this.multipleVoucherSelection = []
      } else {
        this.multipleVoucherSelection = val
      }
    }
  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
</style>
